<template>
	<view class="flexco bigview">
		<view class="bgmask flexco">
			<text class="tit b">uniapp的PC后台管理模板</text>
			<uni-forms ref="form">
				<uni-easyinput prefixIcon="person" placeholder="请输入姓名" style="color: #FFFFFF;"></uni-easyinput>
				<uni-easyinput prefixIcon="locked" type="password" placeholder="请输入密码" style="color: #FFFFFF;"></uni-easyinput>
			</uni-forms>
			<el-button type="primary" @click="submit" size="large">登录</el-button>
			<!-- <el-button type="primary" @click="goLogin" size="large">真实请求</el-button> -->
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';
import { userLogin } from '@/api/login';
import { IUser } from '@/interface/login';
import useMenuStore from '@/stores/modules/menu';
import { permission } from '@/permission/permission';
import config from '@/config/config'
// 真实请求写法
// 如需测试请求先把上面的 <el-button type="primary" @click="goLogin" size="large">真实请求</el-button>  注释解开

// const data = reactive({
// 	info: {
// 		username: '张三',
// 		password: '123456'
// 	}
// });
// const { info } = toRefs(data);
// const goLogin = async () => {
// 	let params: IUser = data.info
// 	const res = await userLogin(params);
// 	if (res.success) {
// 		uni.showToast({
// 			title: '登录成功'
// 		});
// 		const { setMenu } = useMenuStore();
// 		setMenu(res.data.username,res.data.permission,res.data.token);//将可访问的路由权限和用户名传给store
//      config.headerValue = data.token; //设置请求头
// 		uni.redirectTo({
//			url:'/pages/index/index'
//		})
// 	} else {
// 		uni.showToast({
// 			title: res.msg,
// 			icon: 'error'
// 		});
// 	}
// };

//后端控制路由权限 模拟
const submit = () => {
	//模拟登录后返回的角色
	let data = {
		role: '超级管理员',
		id: '21321313131313',
		username: '小明',
		token: 'xxxxx',
		permission: [
			'/pages/index/index',
			'/pages/map/map',
			'/pages/charts',
			'/pages/charts/ucharts',
			'/pages/charts/echarts',
			'/pages/editor',
			'/pages/editor/unieditor/unieditor',
			'/pages/setting',
			'/pages/setting/role-management',
			'/pages/editor/wangeditor/wangeditor'
		]
	};

	const { setMenu } = useMenuStore();
	setMenu(data.username, data.permission,data.token); //后端设置权限，将可访问的路由权限和用户名传给store
	config.headerValue = data.token; //设置请求头
	
	//前端设置权限，将可访问的路由权限和用户名传给store
	/* let permit = permission.defaultRule.filter(item => {
		return item.name === data.role;
	});
	setMenu(data.username, permit[0].page,data.token);
	config.headerValue = data.token; //设置请求头
	 
	*/ 
	
	
	uni.redirectTo({
		url:'/pages/index/index'
	})
};
</script>

<style>
.bgmask {
	width: 400px;
	height: 400px;
	padding: 0 20px;
	border-radius: 10px;
}
.bigview {
	background: #2d3a4b;
	padding-bottom: 100px;
	box-sizing: border-box;
}
.tit {
	font-size: 28px;
	color: #ffffff;
	margin-bottom: 50px;
}
.bigview {
	background: #2d3a4b;
	width: 100vw;
	height: 100vh;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.uni-easyinput {
	width: 400px;
	margin-bottom: 30px;
}
.el-button {
	width: 400px;
	line-height: 40px;
}
</style>
